/**
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/03/21
 *@description  module  component
 */
import config from '../../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-scroll-track-v'
const transitionCls = config.prefix + '-scrollbar-transition'
const scrollbarCls = config.prefix + '-scroll-bar'

// module
const module = {
  name: config.prefix + '-vertical-scrollbar',
  components: { },
  props: {
    // 滚动区域的高
    scrollAreaHeight: {
      type: Number,
      default: 0
    },
    // 滚动区域外围的高
    scrollWrapperHeight: {
      type: Number,
      default: 0
    },
    // 滚动条位置
    scrollBarPostion: {
      type: Number,
      default: 0
    },
    // 父元素是否正在拖动
    draggingFromParent: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      // 滚动条的高
      height: 0,
      // 是否可以拖动
      dragging: false,
      // 开始的位置
      start: 0
    }
  },
  watch: {
    'scrollWrapperHeight' (val, old) {
      if (val != old) {
        this.calculateSize()
      }
    },
    'scrollAreaHeight' (val, old) {
      if (val != old) {
        this.calculateSize()
      }
    }
  },
  computed: {
    wrapClasses () {
      return [
        prefixCls,
        this.dragging || this.draggingFromParent ? '' : transitionCls
      ]
    },
    scrollbarClass () {
      return [
        scrollbarCls,
        this.dragging || this.draggingFromParent ? '' : transitionCls
      ]
    },
    style () {
      return {
        height: this.height + '%',
        top: this.scrollBarPostion + '%'
      }
    }
  },
  methods: {
    startDrag (e) {
      /*
       * 阻止默认事件
       * Artery.stopEvent(e);
       * mobile
       */
      e = e.changedTouches ? e.changedTouches[0] : e
      // 正在拖动
      this.dragging = true
      // 设置开始的位置
      this.start = e.pageY
    },
    onDrag (e) {
      if (this.dragging) {
        // 阻止默认事件
        Artery.stopEvent(e)
        e = e.changedTouches ? e.changedTouches[0] : e
        // y移动的距离
        const yMovement = e.pageY - this.start
        // y移动的百分比
        const yMovementPercentage = yMovement / this.scrollWrapperHeight * 100
        // 更新开始的位置
        this.start = e.pageY
        // 滚动条下次的位置
        const nextValue = this.scrollBarPostion + yMovementPercentage
        //  事件分发
        this.$emit('change-position', this.getComputedScrollBarPostion(nextValue), 'vertical', true)
      }
    },
    stopDrag (e) {
      // 取消拖动
      this.dragging = false
      //  事件分发
      this.$emit('change-position', this.getComputedScrollBarPostion(this.scrollBarPostion), 'vertical', false)
    },
    clickGoto (e) {
      const isContainer = e.target === this.$el
      if (isContainer) {
        // Get the Element Position
        const position = this.$refs.scrollbar.getBoundingClientRect()
        // y移动的距离
        const yMovement = e.pageY - position.top
        // 高的2分之1
        const centerize = (this.height / 2)
        // y移动的百分比，减去高的2分之1，刚好让滚动条处于中心
        const yMovementPercentage = yMovement / this.scrollWrapperHeight * 100 - centerize
        // 更新开始的位置
        this.start = e.pageY
        // 滚动条下次的位置
        const nextValue = this.scrollBarPostion + yMovementPercentage
        //  事件分发
        this.$emit('change-position', this.getComputedScrollBarPostion(nextValue), 'vertical')
      }
    },
    // 获取滚动条的最终位置
    getComputedScrollBarPostion (postion) {
      // Check For the Max Position
      const lowerEnd = 100 - this.height
      let _scrollBarPosition = postion
      if (_scrollBarPosition < 0) {
        _scrollBarPosition = 0
      }
      if (_scrollBarPosition > lowerEnd) {
        _scrollBarPosition = lowerEnd
      }
      return _scrollBarPosition
    },
    calculateSize () {
      // Scrollbar Height
      this.height = this.scrollWrapperHeight / this.scrollAreaHeight * 100
    }
  },
  updated () {},
  created () {},
  mounted () {
    this.calculateSize()
    //  事件监听
    Artery.on(document, 'mousemove', this.onDrag)
    Artery.on(document, 'touchmove', this.onDrag)
    Artery.on(document, 'mouseup', this.stopDrag)
    Artery.on(document, 'touchend', this.stopDrag)
  },
  beforeDestroy () {
    //  移除事件监听
    Artery.off(document, 'mousemove', this.onDrag)
    Artery.off(document, 'touchmove', this.onDrag)
    Artery.off(document, 'mouseup', this.stopDrag)
    Artery.off(document, 'touchend', this.stopDrag)
  }
}
export default module
